<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shadow Demo</title>
<link rel="stylesheet" href="../../../themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
<link rel="stylesheet" href="css/style.css" type="text/css" />

<script type="text/javascript" src="../../../jquery/src/core.js"></script>
<script type="text/javascript" src="../../../jquery/src/selector.js"></script>
<script type="text/javascript" src="../../../jquery/src/event.js"></script>
<script type="text/javascript" src="../../../jquery/src/ajax.js"></script>
<script type="text/javascript" src="../../../jquery/src/fx.js"></script>
<script type="text/javascript" src="../../../jquery/src/offset.js"></script>
<script type="text/javascript" src="../../dimensions/jquery.dimensions.js"></script>

<script type="text/javascript" src="../ui.mouse.js"></script>
<script type="text/javascript" src="../ui.draggable.js"></script>
<script type="text/javascript" src="../ui.resizable.js"></script>
<script type="text/javascript" src="../ui.shadow.js"></script>

</head>
<body class="flora">

<h2>1. Default, no options</h2>
<div class="playground">
	<img id="example1" src="images/resizable.jpg" alt="" /><br /><br />
	<button onclick="$('#example1').shadowEnable()">Enable</button>
	<button onclick="$('#example1').shadowDisable()">Disable</button>
</div>

<h2>2. Red shadow, very light, greater offset</h2>
<div class="playground">
	<img id="example2" src="images/resizable.jpg" alt="" /><br />
</div>

<h2>3. In combination with drag &amp; drop (and resizing for FF/Opera [IE to follow])</h2>
<div class="playground" style="height: 200px;">
	<img id="example3" style="position: relative; z-index: 10;" src="images/resizable.jpg" alt="" /><br />
</div>

<script type="text/javascript">
if(!window.console) {
 window.console = {
 	log: function() {
 		alert(arguments[0]);	
 	}	
 }	
}

$(window).bind("load",function(){

	$('#example1').shadow();
	$('#example2').shadow({ color: "red", offset: 10, opacity: 0.1 });
	$('#example3').resizable({ zIndex: 15}).parent().shadow({ offset: 10 }).draggable();

});
</script>
</body>
</html>
